<script setup>
// 客户群发页
import { ref, reactive, toRef, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { postCustomerList,postCustomerAlert } from '@/api'
import detail from './detail.vue'
const router = useRouter()

const countList = ref([])
const currentPage = ref(1) //页码
const pageSize = ref(10) //	条数
const GroupTag = async() => {
	const r = postCustomerList({
		page: currentPage.value,
		size: pageSize.value
	})
	if (r){
		countList.value = res.data
	}
		
	
}
const detailMore = ref(null)
const dialogVisible = ref(false)
const showList = ()=>{
	dialogVisible.value = false
	
}
const showDetail = (id)=>{
	dialogVisible.value = true
	detailMore.value.show(id)
}
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const dateValue1 = ref([])
const getData = (val)=>{
	if (val&&typeof(val)!='object') page.value = val
    postCustomerList({
        page:page.value,size:10,times:dateValue1.value||[]
    }).then((res) => {
    // console.log(res.data)
        total.value = res.data.count
	    tableData.value = res.data.item
	// console.log(aothList)
    })
}
getData()


const src = ref({
	src: ''
	//  src:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
})

const editGo = () => {
	router.push(`newGroupSending`)

	// dialogData.value = item
	// dialogFormVisible.value = true;
}

const open = (id) => {
	ElMessageBox.confirm('确认后将会给所有未发送成员发送提醒通知，是否发送', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消'
	})
		.then(async() => {
			const r = await postCustomerAlert({
				id:id
			})
			if (r){
				ElMessage({
					type: 'success',
					message: '提醒成功'
				})
			}
			
			
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '提醒失败'
			})
		})
}

</script>

<template>
	<div class="allStyle" v-if="!dialogVisible">
		<div class="table-operation">
			<div class="table-operation-left">
				<el-button type="primary" @click="editGo">新增群发</el-button>
				<!-- <span style="margin-left: 20px">什么是客户群发？</span> -->
			</div>
			<div class="table-operation-right">
				<!-- <span class="table-operation-label">可用部门:</span>
				<el-select v-model="selectValue" clearable placeholder="全部" style="width: 150px; margin-right: 15px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select> -->
				<span class="table-operation-label">发送时间:</span>
				<el-date-picker
					v-model="dateValue1"
					@change="getData"
					value-format="YYYY-MM-DD"
					format="YYYY-MM-DD"
					type="daterange"
					style="width: 215px; height: 32px; margin-left: 5px"
					range-separator="~"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				/>
				<el-button style="margin-left: 20px">重置</el-button>
			</div>
		</div>
		<!-- 表格部分 -->
		<div class="tableStyle">
			<div class="tableStyleTop">
				<div style="font-size: 14px; color: #666; font-weight: bold">共{{total}}条素材</div>
				<!-- <div>
					<el-button type="primary" plain>导出Excel</el-button>
				</div> -->
			</div>
			<!-- table 部分-->
			<div>
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{ color: '#909399', fontSize: '14px', backgroundColor: '#F7F9FA', padding: '10px 0' }"
					:cell-style="{ fontSize: '14px', padding: '20px 0' }"
				>
					<el-table-column prop="massContent" label="群发内容" width="200">
						<template #default="scope">
							<div>
								<div>
									<div style="color: #409eff">[共{{scope.row.size}}条数据]</div>
									
								</div>
								<span>{{ scope.row.content }}</span>
							</div>
							<div v-if="scope.row.adjunct_data.length!=0">
								<div class="app-flex-left" style="margin-top:10px" v-for="(item,index) in scope.row.adjunct_data" :key="index">
									<el-avatar shape="square" :src="item.url||item.link_picurl||item.miniprogram_imgurl

" size="50" />
									<span style="display:inline-block;margin-left:10px">{{item.title||item.link_title||item.miniprogram_title}}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sendType" label="发送类型">
					<template #default="scope">
							{{scope.row.send_status==1?'立即群发':'定时群发'}}
						</template>
					</el-table-column>
					<el-table-column prop="send_time" label="发送时间"> </el-table-column>
					<!-- <el-table-column prop="createdBy" label="创建人">
						<template #default="scope">
							<div class="app-words-box">
								<div class="app-flex-left">
									<MyIcon class="app-down-icon primary-font" name="Person" />
									<span class="app-gap-words-left-xs">{{ scope.row.createdBy }}</span>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="creatorDepartment" label="创建人所属部门" /> -->
					<el-table-column prop="detail.send_staff" label="已发送成员" />
					<el-table-column prop="detail.delivery_customer" label="送达客户" />
					<el-table-column prop="detail.unsent_staff" label="未发送成员" />
					<el-table-column prop="detail.unsent_customer" label="未送达客户" />
					<el-table-column prop="operation" label="操作" width="150">
						<template #default="scope">
							<ul class="tableOperation">
								<li @click="open(scope.row.id)">提醒发送</li>
								<li @click="showDetail(scope.row.id)">详情</li>
							</ul>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="app-page">
			<el-pagination :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
		</div>
		</div>
		
	</div>
	<detail ref="detailMore" @goBack="showList" />
</template>
<style>
.allStyle {
	margin: 20px;
}

.topStyle {
	display: flex;
	justify-content: flex-start;
}

.centerSelectStyle {
	position: relative;

	display: flex;
	justify-content: space-between;
	height: 80px;
	background-color: #ffffff;
	border-radius: 10px;
	margin-top: 25px;
}

.centerSelectChild {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.timeChild {
	margin-left: 50px;
	display: flex;
	justify-content: flex-start;
}

.centerSelectChild2 {
	position: absolute;
	right: 20px;
	line-height: 80px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: 5px;
}

.tableStyle {
	background-color: #ffffff;
	margin-top: 20px;
	/* height: 550px; */
	border-radius: 10px;
}

.tableStyleTop {
	display: flex;
	justify-content: space-between;
	height: 68px;
	line-height: 68px;
	border-bottom: 1px solid #f0f2f5;
	padding: 0 20px;
}

.Child2Style {
	position: relative;
	margin-left: 5px;
	width: 203px;
	height: 32px;
	margin-top: 2px;
	border-radius: 5px;
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
}

.Child2Content {
	position: absolute;
	top: -27px;
	padding-left: 5px;
	font-size: 14px;
	color: #999999;
}

.child2StyleIcon {
	position: absolute;
	right: 8px;
	top: 5px;
}

/* 弹窗 */
.dialogStyle1 {
	display: flex;
	justify-content: flex-start;
}

.filterStyle {
	display: flex;
	justify-content: flex-start;
	margin-top: 5px;
}

.filterStyleBottom {
	float: right;
	margin-top: 100px;
}
.app-page {
	text-align: center;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.table-operation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-left {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-right {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: rgb(89, 89, 89);
}
.table-operation-label {
	width: 65px;
}
.public-container {
	margin: 20px 20px 0 20px;
	background: #fff;
	padding: 20px 0 0 0;
	border-radius: 10px;
}
.tableHeader {
	height: 40px;
	font-size: 14px;
	color: #909399;
	background: #f7f9fa;
}
.tableOperation {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.tableOperation li {
	font-size: 14px;
	color: #409eff;
	border-right: 1px solid #ebebeb;
	padding: 0 10px;
	height: 14px;
	line-height: 14px;
	cursor: pointer;
}
.tableOperation li:hover {
	color: #a0cfff;
}
.tableOperation li:first-child {
	padding-left: 0;
}
.tableOperation li:last-child {
	border-right: none;
}
.el-page-header {
  display:none;
}
</style>
